<template>
  <div class="app-container">
    <div class="zd3">
      <div class="zd3-title">
        <p>
          <span>部门</span>
          <input v-model="bumen" type="text" placeholder="请输入部门" />
        </p>
        <h3 @click="getList">查询</h3>
        <h4 @click="resetList">重置</h4>
				<h3 @click="addPeople" style="background: #0093FF">新增</h3>
      </div>
      <div class="zd3-btm">
        <!-- <div class="zd3-btm-title">
          <p style="flex: 1">标题</p>
          <p style="flex: 1">内容</p>
          <p style="flex: 1">提交人</p>
          <p style="flex: 1">备注</p>
          <p style="width: 250px;">操作</p>
        </div> -->
        <!-- <div class="addDate" @click="addPeople">+ 新增进度完成情况</div> -->
        <el-table
          :data="tableData"
          style="width: 100%;margin-bottom: 20px;"
          :show-header="true"
          v-loading="loading"
        >
          <el-table-column align="center" prop="stitles" label="标题"></el-table-column>
          <el-table-column align="center" prop="scontents" label="内容"></el-table-column>
          <el-table-column align="center" prop="spersons" label="提交人"></el-table-column>
          <el-table-column align="center" prop="parentFile" label="文档">
            <template slot-scope="scope">
              <p @click="downloadFile(scope.row.sfileId)" class="downloadfile">下载<i class="el-icon-download" /></p>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="sremarks" label="备注"></el-table-column>
          <el-table-column align="center" width="250" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="write(scope.row,scope.$index)">修改</el-button>
              <el-popconfirm
                placement="top"
                hideIcon
                title="是否要删除此行？"
                @onConfirm="deleteRow(scope.row)"
              >
                <el-button type="text" size="small" slot="reference">删除</el-button>
              </el-popconfirm>
              <!-- <el-button type="text" size="small" v-if="scope.row.status == 0">启用</el-button>
              <el-button type="text" size="small" v-else>禁用</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          align="right"
          layout="prev, pager, next"
          :total="total"
          :page-size="50"
          @prev-click="goPrev"
          @next-click="goNext"
          @current-change="goPage"
        />
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :modal-append-to-body="false" :modal="true" width="70%">
      <div class="change">
        <p>
          <span>标题</span>
          <el-input type="text" v-model="tempData.stitles" class="userselect" placeholder="请输入标题" />
        </p>
				<p>
				  <span>内容</span>
				  <el-input type="text" v-model="tempData.scontents" class="userselect" placeholder="请输入内容" />
				</p>
				<p>
				  <span>提交人</span>
				  <el-input v-model="tempData.spersons" disabled type="text" class="userselect" placeholder="请选择提交人"/>
				</p>
				<p>
				  <span>备注</span>
				  <el-input type="text" v-model="tempData.sremarks" class="userselect" placeholder="请输入备注" />
				</p>
        <p>
          <span>上传资料</span>
          <el-upload
            class="upload-demo userselect"
            drag
            :show-file-list="false"
            :http-request="designUpFile"
            action=""
            :multiple='false'
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <p style="margin: 0 0 0 15px;">
            <strong v-if="tempData.sfileId">{{tempData.sfileId}}</strong>
            <strong v-if="tempData.sfileId" @click="downLoad(tempData.sfileId)">下载<i class="el-icon-download" /></strong>
          </p>
        </p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消保存</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>
		<!-- 采购员弹窗 -->
		<el-dialog title="采购员" :visible.sync="buyerShow" width="80%">
		  <div class="files">
				<div class="files-left">
					<el-menu class="el-menu-vertical-demo" @select="handleSelece" default-active="0">
						<el-menu-item :index='index' v-for="(item,index) in ifydata" :key="index">
							<span slot="title">{{item.departments}}</span>
						</el-menu-item>
					</el-menu>
				</div>
				<div class="files-right">
					<div class="files-btm">
						<el-table 
		          :data="peopleData" 
		          height="400" 
		          highlight-current-row
		          @current-change="handlePeople"
		          style="margin-bottom: 20px;" 
		          :show-header="true" >
							<el-table-column align="center" prop="code" label="编码"></el-table-column>
							<el-table-column align="center" label="头像">
								<template slot-scope="scope">
									<img :src="scope.row.icon" alt="" class="avatar">
								</template>
							</el-table-column>
							<el-table-column align="center" prop="username" label="姓名"></el-table-column>
							<el-table-column align="center" prop="departments" label="所属部门"></el-table-column>
							<el-table-column align="center" prop="sex" label="性别"></el-table-column>
							<el-table-column align="center" prop="power" label="职务"></el-table-column>
							<el-table-column align="center" prop="phone" width="120" label="手机号码"></el-table-column>
							<el-table-column align="center" prop="email" label="邮箱"></el-table-column>
							<el-table-column align="center" prop="status" label="状态"></el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="buyerShow = false">取 消</el-button>
		    <el-button type="primary" @click="buyerShow = false">确 定</el-button>
		  </span>
		</el-dialog>
  </div>
</template>

<script>
// import { getBumen,updateBumen,addBumen,deleteBumen } from '@/api/people'
// 重点项目进度完成模块，页面暂时看不到
import { getUser,getBumen,uploadFile } from '@/api/people'
import { getProgress,updateProgress,addProgress,deleteProgress } from '@/api/keyprojects'
import user from '../../../../mock/user';
let options = null
export default {
  data() {
    return {
      name: "",
      bumen: "",
      total: 1,
      pages: 1,
      showHeader: false,
      tableData: [],
      dialogVisible: false,
      tempData: {},
      tempIndex: -1,
      loading: true,
			peopleData: [],
			ifydata: [],   //部门列表
			buyerShow: false
    };
  },
  mounted(){
		// this.getpeople()
		this.bumenList()
		options = JSON.parse(this.$route.params.options)
    this.getList(options.id)
    this.tempData.spersons = this.$store.state.user.userInfo[0].username
    console.log('spersons',this.tempData.spersons)
  },
  methods: {
    getList(id) {
      const param = {
        departments: this.bumen || null,
        parentId: id,
        currentPage: this.pages
      }
      getProgress(param).then(res => {
        console.log('部门管理')
        console.log(res)
        this.tableData = res.data.records
        this.loading = false
      })
    },
    // 上传文件
    designUpFile(item) {
      console.log(this.fileNum)
      const loading = this.$loading({
        lock: true,
        text: '上传中请稍等...',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      })
      var formData = new FormData();
      formData.append("file", item.file)
      uploadFile(formData).then(res => {
        console.log(res)
        this.tempData.sfileId = res
        this.$forceUpdate()
        loading.close()
        // addPeople({fileName: res}).then(res => {
        //   console.log(res)
        //   this.$message({
        //     showClose: true,
        //     message: '添加成功',
        //     type: "success"
        //   })
          
        // })
      })
    },
		// 选择人员分类
		handleSelece(index){
			console.log(index)
			console.log('ifydata:',this.ifydata[index])
			const navindex = this.ifydata[index].value ? this.ifydata[index].value : null
			this.getpeople(navindex)
		},
		// 选择操作人员
		handlePeople(row){
		  console.log(row)
		  this.tempData.spersons = row.username
		  console.log(this.tempData.spersons)
			this.buyerShow = false
		},
		checkBuyer() {
		  this.buyerShow = true;
		},
		getpeople(id){
		  console.log('id:',id)
		  getUser({departments: id}).then(res => {
		    console.log(res)
		    this.peopleData = res.data.list
		  })
		},
		bumenList(){
		  getBumen({}).then(res => {
		    console.log(res)
		    res.data.map(item => {
					item.value = item.departments
					return item
				})
				this.ifydata = res.data
		  })
		},
    write(item, index) {
			this.tempData = {...item}
			this.dialogVisible = true
			this.tempIndex = index
		},
    save() {
			if(this.tempIndex == -1){
        // console.log('新增')
				this.tempData.parentId = options.id
        addProgress(this.tempData).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          });
          this.getList(options.id)
        })
			}else{
				this.tempData.parentId = options.id
        updateProgress(this.tempData).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          });
          this.getList(options.id)
        })
				// console.log('xiugai')
      }
      this.dialogVisible = false
			this.tempIndex = -1
		},
    deleteRow(item) {
      console.log("删除");
      deleteBumen(item.id).then(res => {
        console.log(res)
        this.$message({
          showClose: true,
          message: res.message,
          type: 'success'
        });
        this.getList(options.id)
      })
    },
    downloadFile(path){
      console.log(path)
      if(path){
        window.location.href = path
      } else {
        this.$message({
          message: '暂无上传相关文档！',
          type: 'warning'
        })
      }
    },
    goPrev(page) {
      console.log(page)
      this.pages--
      this.getList(options.id)
    },
    goNext(page) {
      console.log(page);
      this.pages++
      this.getList(options.id)
    },
    goPage(page){
      this.pages = page
      this.getList(options.id)
    },
    resetList() {
      this.bumen = ""
    },
    addPeople() {
      this.dialogVisible = true
			this.tempIndex = -1
			this.tempData = {
        spersons: this.tempData.spersons
      }
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.downloadfile{
  color: #18a05e;
  cursor: pointer;
}
.app-container {
  padding: 10px;
}
.status {
  border-radius: 3px;
  font-size: 14px;
  width: 50px;
  color: #fff;
  background: #777777;
  margin: 0 auto;
}
.status-active {
  background: #18a05e;
}
.inps {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  background: none;
  border: none;
  color: #333;
}
.inps-active {
  width: 100%;
  height: 32px;
  line-height: 32px;
  padding-left: 10px;
  // background:#ccc;
  border: none;
  color: #333;
}
/deep/.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: auto;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.zd3-title {
	height: 80px;
	display: flex;
	align-items: center;
	padding: 0 20px;
	position: relative;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.1);

	> p {
		font-size: 14px;
		color: #333;
		margin-right: 30px;

		> span {
			padding-right: 20px;
		}

		> input {
			width: 200px;
			height: 32px;
			// background: #ccc;
			border-radius: 3px;
			border: 1px solid #ccc;
			padding-left: 10px;
			color: #333;
		}
	}

	> h3 {
		width: 64px;
		height: 32px;
		background: #18a05e;
		border-radius: 3px;
		margin: 0 30px 0 0;
		color: #fff;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
	}

	> h4 {
		width: 64px;
		height: 32px;
		border-radius: 3px;
		border: 1px solid rgba(0, 0, 0, 0.1);
		color: #333;
		font-size: 14px;
		line-height: 32px;
		font-weight: 100;
		text-align: center;
		cursor: pointer;
		margin-right: 30px;
	}
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #18a05e !important;
  color: #fff;
}
.zd3-btm /deep/.btn-prev:after {
  content: "上一页";
}
.zd3-btm /deep/.btn-next:before {
  content: "下一页";
}
.zd3-btm /deep/.btn-prev,
.zd3-btm /deep/.btn-next {
  width: 65px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.zd3-btm {
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 10px;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    > p {
      text-align: center;
      font-size: 16px;
      color: #333;
    }
  }
  .el-pagination {
		white-space: nowrap;
		padding: 15px 5px;
		color: #303133;
		font-weight: bold;
	}
  .addDate {
    margin: 20px 32px 10px 32px;
    height: 32px;
    border-radius: 3px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    border: 1px dashed rgba(0, 0, 0, 0.3);
  }
  .el-button--text {
    margin: 0 15px;
  }
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 50%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      // line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.files {
	  display: flex;
	  background: #fff;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  border-radius: 8px;
	  margin-top: 20px;
	  overflow: hidden;
	  padding: 20px;
	}
	.files-btm .btn-prev:after {
	  content: "上一页";
	}
	.files-btm .btn-next:before {
	  content: "下一页";
	}
	.files-btm .btn-prev,
	.files-btm .btn-next {
	  width: 65px;
	}
	.files-left {
		width: 160px;
		margin-right: 20px;
		/deep/.el-menu{
			border-right: none;
		}
		/deep/.el-menu-item{
			height: 35px;
			line-height: 35px;
			margin-bottom: 8px;
		}
		/deep/.el-menu-item.is-active{
			color: #fff;
			border-radius: 5px;
			background: rgba(24,160,94,.8);
		}
	}
	.files-right {
	  flex: 1;
	  overflow: hidden;
	}
	.files-btm {
	  background: rgba(255, 255, 255, 1);
	  border-radius: 8px;
	  border: 1px solid rgba(0, 0, 0, 0.1);
	  // margin-top: 20px;
	  overflow: hidden;
	  &-title {
	    display: flex;
	    align-items: center;
	    height: 45px;
	    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	    background: #ffffff;
	    > p {
	      text-align: center;
	      font-size: 16px;
	      color: #333;
	    }
	  }
	  .addDate {
	    margin: 20px 32px 10px 32px;
	    height: 32px;
	    border-radius: 3px;
	    text-align: center;
	    line-height: 32px;
	    font-size: 14px;
	    color: #333;
	    cursor: pointer;
	    border: 1px dashed rgba(0, 0, 0, 0.3);
	  }
	  .el-button--text {
	    margin: 0 15px;
	  }
	}
	.avatar{
		width: 30px;
		height: 30px;
	}
</style>
